<template>
  <el-descriptions class="margin-top" title="" :column="2" border>
    <el-descriptions-item v-for="item in descriptionsList" :key="item.label" :label="item.label">
      <template v-if="item?.type === 'images'">
        <el-image style="width: 100px; height: 100px" :src="value.url"
          v-for="(value, index) in formData[item.fieldName] || []" :key="index" :preview-src-list="[value.url]" />
      </template>
      <template v-else-if="item?.type === 'file'">
        <!-- {{ formData[item.fieldName] }} -->
        <el-image style="width: 100px; height: 100px" :src="getUrl(value.url)"
          v-for="(value, index) in formData[item.fieldName] || []" :key="index" @click="openImg(value.url)" />
        <el-image-viewer v-if="showImg" :url-list="srcList" show-progress :initial-index="0" @close="showImg = false" />
      </template>
      <template v-else>
        {{ formData[item.fieldName] }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>
<script setup lang="ts">
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const descriptionsList = ref([
  {
    label: "合同金额(元)",
    fieldName: "contractAmount",
  },
  {
    label: "合同时间",
    fieldName: "contractTime",
  },
  // {
  //   label: "付款凭证",
  //   fieldName: "paymentFile",
  //   type: "images",
  // },
  {
    label: "设计合同",
    fieldName: "contractFile",
    type: "file",
  },
  {
    label: "收款凭证",
    fieldName: "receiptFile",
    type: "images",
  },
]);
const showImg = ref(false);
const srcList = ref([]);

function getUrl(val: any) {
  if (val && val.includes(".pdf")) {
    return "https://djucloud-prod.oss-cn-shanghai.aliyuncs.com/mini_program_dir/pdfs.png";
  } else {
    return val;
  }
}

function openImg(val: any) {
  if (val && val.includes(".pdf")) {
    window.open(val, "_blank");
  } else {
    showImg.value = true;
    srcList.value = [val];
  }
}

const formData = computed(() => {
  console.log(props.data);
  const { paymentFile, receiptFile, contractFile } = props.data.houseConstructionLinkVO || {};
  return {
    ...props.data,
    ...(props.data.houseConstructionLinkVO || {}),
    paymentFile: JSON.parse(paymentFile || "[]"),
    receiptFile: JSON.parse(receiptFile || "[]"),
    contractFile: JSON.parse(contractFile || "[]"),
  };
});
</script>
